<template>
    <div class="cont-login">
        <div class="header">
            <span>登录</span>
            <a href="https://www.vue-js.com/signup" class="signup">注册</a>
        </div>
        <div class="login-psw">
            <mu-text-field v-model="val" :errorText="error"  label="请输入accessToken" hintText="accessToken" type="password" labelFloat/><br>
            <mu-raised-button @click="login" label="登录" class="demo-raised-button" primary/>
        </div>
        <div class="get-psw">
            <mu-raised-button class="demo-raised-button" label="如何获取accessToken" icon="help_outline" @click="registered"/>
        </div>
    </div>
</template>
<script>
    import axios from 'axios'
    export default {
        data () {
            return {
                val: '',
                error: '',
                url: 'https://www.vue-js.com/api/v1/accesstoken'
            }
        },
        methods: {
            login() {
                axios.post(this.url,{
                    accesstoken: this.val
                }).then(response=>{
                    this.error = '',
                    localStorage.setItem('accesstoken',this.val)
                    localStorage.setItem('user_id',response.data.id)
                    localStorage.setItem('loginname',response.data.loginname)
                    this.$router.push({
                        path: '/vue-home/dist/my'
                    })
                }).catch(errop=>{
                    if(!this.val){
                        this.error = '空可是不允许的哦 ~'
                    } else{
                        this.error = '少年，你可能输错了暗号 ~'
                        this.$route.matched[0].meta = {
                            requiresAuth: true
                        }
                    }
                })
            },
            registered(){
                window.location.href = 'https://www.vue-js.com/signup'
            }
        }
    }
</script>
<style lang="scss" scoped>
    .cont-login{
        display: flex;
        flex-direction: column;
        height: 100vh;
        .header {
            position: fixed;
            top: 0;
            height: 4rem;
            width: 100%;
            text-align: center;
            overflow: hidden;
            background: #7e57c2;
            line-height: 4rem;
            span {
                color: #fff;
                font-size: 2rem;
            }
            .signup {
                font-size: 1.6rem;
                float: right;
                color: #fff;
                position: fixed;
                right: 1rem;
            }
        }
        .login-psw {
            text-align: center;
            position: relative;
            margin-top: 14rem;
            .demo-raised-button {
                margin-top: 6rem;
            }
        }
        .get-psw{
            text-align: center;
            margin-top: 2rem;
            font-size: 1.2rem;
        }
    }
</style>